<template>
  <view class="page-body">
    <div class="page-head" :style="'background: url('+ asyncImgs.chart_gpt.task_head + ') 0 0 / 100% 100% no-repeat;'">
      <div class="flex-x-sb opacity-4 u-font-24 u-m-b-4">
        <div class="">我的{{ stores.integral_name }}</div>
        <div
          class="flex-y-center"
          @click="$utils.toUrl('/integral/integral/myIntegralDetail')"
        >
          <div>{{ stores.integral_name }}明细</div>
          <div class="iconfont icon-arrow-right u-font-22"></div>
        </div>
      </div>

      <div style="font-size: 64rpx; font-weight: 600">
        {{ pageData.integral }}
      </div>

      <div @click="showRule = true" class="u-m-t-18 flex-y-center opacity-4">
        <div>规则说明</div>
        <div class="iconfont icon-help1"></div>
      </div>
    </div>

    <div class="font-w-600 u-font-30 u-p-t-30 u-p-b-30">充值套餐</div>

    <div v-if="pageData.list.length" class="list">
      <div
        @click="checkItem = item"
        :class="[
          'item flex-y-center u-m-b-24',
          checkItem.id == item.id && 'item-check',
        ]"
        v-for="(item, i) in pageData.list"
        :key="i"
      >
        <div class="flex-w-1">
          <div class="font-w-600 u-font-30">{{ item.name }}</div>
          <div class="u-font-26 color-999 u-m-t-4">
            {{ item.send_integral }}{{ stores.integral_name }}
          </div>
        </div>
        <div class="price-box flex-col flex-y-center">
          <div style="color: #f0250e; font-weight: 600">
            ¥
            <text style="font-size: 48rpx">
              {{ splitString(item.pay_price)[0] }}
            </text>
            {{ splitString(item.pay_price)[1] }}
          </div>
          <div
            style="text-decoration: line-through; color: #999; font-size: 24rpx"
          >
            ¥{{ item.original_price }}
          </div>
        </div>
      </div>
    </div>

    <u-empty v-else :status="pageData.loadmoreStatus" mode="data"></u-empty>

    <u-popup
      closeable
      v-model="showRule"
      border-radius="20"
      mode="center"
      :safe-area-inset-bottom="false"
      width="600rpx"
    >
      <view class="flex-x-center u-font-30 font-w-600 u-p-t-30 u-p-b-30">
        规则说明
      </view>

      <scroll-view
        scroll-y
        style="max-height: 60vh; min-height: 30vh; padding: 0 30rpx"
      >
        <div style="font-size: 26rpx; line-height: 1.5">
          {{ pageData.rule }}
        </div>
      </scroll-view>
    </u-popup>

    <div v-if="checkItem" class="bottom-total">
      <div class="bottom-fixed">
        <div class="flex-w-1">
          <text class="u-font-24"> 合计： </text>
          <text class="color-main font-w-600 u-font-30">
            ¥
            <text style="font-size: 40rpx">
              {{ splitString(checkItem.pay_price)[0] }}
            </text>
            {{ splitString(checkItem.pay_price)[1] }}
          </text>
        </div>
        <div class="bt" @click="submit">立即充值</div>
      </div>
    </div>
  </view>
</template>
<script>
import orderPay from '@/common/orderPay.js';
export default {
  data() {
    return {
      pageData: {
        page: 1,
        pageSize: 10,
        list: [],
        loadmoreStatus: 'loadmore',
        integral: 0,
        rule: '',
      },
      checkItem: '',
      showRule: false,
    };
  },
  onLoad() {
    this.loadData();
  },
  onShow() {},
  methods: {
    async loadData(reset, fn) {
      if (reset) {
        let { pageData } = this.$options.data();
        this.pageData = pageData;
      }
      if (this.pageData.loadmoreStatus == 'nomore') return;
      const res = await this.$allrequest.chart.integralRechargeList({}, true);
      // 设置默认选中项
      !this.checkItem &&
        res.data.list.length &&
        (this.checkItem = res.data.list[0]);

      this.pageData.list.push(...res.data.list);
      !this.pageData.rule && (this.pageData.rule = res.data.rule);
      !this.pageData.integral && (this.pageData.integral = res.data.integral);

      this.pageData.loadmoreStatus =
        res.data.list < this.pageData.pageSize ? 'nomore' : 'loadmore';
      this.pageData.page++;
      fn && fn();
    },
    async submit() {
      var _from, pay_type;
      // #ifdef APP-PLUS
      _from = 'app';
      // #endif
      // #ifdef MP-ALIPAY || MP-WEIXIN
      _from = 'mini';
      // #endif

      // #ifdef MP-WEIXIN || APP-PLUS
      pay_type = '1';
      // #endif
      // #ifdef MP-ALIPAY
      pay_type = '4';
      // #endif

      const res = await this.$allrequest.chart.integralRechargeSubmit(
        {
          recharge_id: this.checkItem.id,
          send_integral: this.checkItem.send_integral,
          pay_price: this.checkItem.pay_price,
          pay_type,
          _from,
        },
        true
      );

      if (res.code == 0) {
        // #ifdef MP-ALIPAY
        uni.requestPayment({
          provider: 'alipay',
          orderInfo: res.data.trade_no,
          complete: function (res) {
            if (res.resultCode == 9000) {
              // 此处不做处理
              uni.navigateTo({
                url: '/user/balance/balance',
              });
            } else {
              uni.showToast({
                title: '订单尚未支付',
                icon: 'none',
                duration: 2000,
              });
            }
          },
        });
        // #endif
        // #ifndef MP-ALIPAY
        orderPay.paySubmit(
          res,
          '/chart-gpt/pay/pay',
          pay_type
        );
        // #endif
      } else {
        this.$utils.toast(res.msg);
      }
    },
  },
  computed: {
    splitString() {
      return function (string) {
        if (!string) return ['0', '.00'];
        if (string.indexOf('.') === -1) {
          return [string, ''];
        } else {
          const splitArr = string.split('.', 2);
          return [splitArr[0], '.' + splitArr[1]];
        }
      };
    },
  },
  watch: {},
  onReachBottom() {},
  onPullDownRefresh() {
    this.loadData(() => {
      uni.stopPullDownRefresh();
    });
  },
};
</script>
<style lang="scss" scoped>
.page-body {
  background: #f2f2f2;
  min-height: 100vh;
  padding: 24rpx;
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  .page-head {
    padding: 40rpx;
    border-radius: 20rpx;
    height: 260rpx;
    color: #fff;
    .opacity-4 {
      opacity: 0.5;
    }
  }

  .list {
    .item {
      padding: 0 40rpx;
      height: 160rpx;
      background: #ffffff;
      border-radius: 20rpx;
      border: 1px solid #fff;
    }
    .item-check {
      border-color: #fdd6d0;
      background: #fdf0f0;
    }
  }

  .bottom-total {
    height: calc(100rpx + env(safe-area-inset-bottom));
    .bottom-fixed {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100vw;
      height: calc(100rpx + env(safe-area-inset-bottom));
      background: #fff;
      padding-bottom: env(safe-area-inset-bottom);
      padding: 0 24rpx;

      display: flex;
      align-items: center;
      .color-main {
        color: #f0250e;
      }

      .bt {
        width: 192rpx;
        line-height: 76rpx;
        background: #f0250e;
        border-radius: 120rpx;
        color: #fff;
        font-weight: 600;
        text-align: center;
      }
    }
  }
}
</style>
